<template>
	<view class="bgc">
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar" >
			<view class="top_view"></view>
		</view>
		<!-- #endif -->
		<uni-nav-bar :fixed='true'>
			<text class="headTitle">电台</text>
			<view slot="left">
				<image src="../../static/img/screen.png" mode="" class="goback" @click="chooseBtn"></image>
			</view>
			<view slot="right">
				<view class="publish" @click="publishBtn">
					发布
				</view>
			</view>
		</uni-nav-bar>
		<view class="slideshowBox">
			<swiper class="swiper" autoplay="autoplay" interval="interval" duration="duration" indicator-dots='true'
			 indicator-active-color='#fff' circular='true'>
				<swiper-item v-for="(item, index) in bannerList" @click="bannerImgBtn">
					<navigator :url="item.url">
						<view class="swiper-item uni-bg-red">
							<image :src="item.image" mode=""></image>
						</view>
					</navigator>
				</swiper-item>
			</swiper>

		</view>
		<!-- 右上角 -->
		<view class="rightFiex" v-if="rightTK" :style="{'top':barHeight+'44'+'px'}">
			<view class="rightOne me-fx-row-start-c" @click="rightDataBtn(index)" v-for="(item, index) in rightData">
				<image :src="item.url" mode=""></image>
				<view class="rightFont">
					{{item.name}}
				</view>
			</view>
		</view>
		<view class="listBorderTop">
			<view class="listBox me-fx-row-start-c">
				<view class="me-fx-col-sb-c list" v-for="(item, index) in iconList" @click="iconBtn(item.id,item.name)">
					<image :src="item.icon" mode=""></image>
					<view class="listTitle">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="bottomListBox me-fx-row-sb-c">
			<view class="bottomListHeader me-fx-row-start-c" v-for="(item, index) in headerList" @click="headerBtn(index)">
				<text>{{item}}</text>
				<image src="../../static/img/jiantou.png"></image>
			</view>
		</view> -->
		<view class="borderTop">
			<block v-if="stationList.length > 0">
				<view class="stationList me-fx-row-sb" v-for="(item, index) in stationList">
					<view class="picPos" @click="lookDetail(item.user.id)">
						<image :src="item.user.avatar" mode="" class="avatar"></image>
					</view>
					<view class="stationListRight">
						<view class="headPicBox me-fx-row-start-c">

							<view class="headPicRight" @click="stationListBtn(item.id)">
								<view class="me-fx-row-start-c">
									<view class="headFont">{{item.user.username}}</view>
									<image src="../../static/img/gril.png" mode="" v-if="sexPic ==item.user.gender " class="sexPic"></image>
									<image src="../../static/img/boy3.png" mode="" v-else class="sexPic"></image>
									<image src="../../static/img/vip.png" mode="" class="vip" v-if="item.vip=='1' "></image>
								</view>
								<view class="time"> 
									{{item.created_at}}
								</view>
							</view>
						</view>
						<view class="functionBox" @click="stationListBtn2(item.id)">
							<block v-if="item.type=='2'">
								<view class="functionList me-fx-row-start-c" v-if="item.publishShow.showMenu.name != ''">
									<image src="../../static/img/newimg/a19.png" mode=""></image>
									<view class="functionFont">
										{{item.publishShow.showMenu.name}}
									</view>
								</view>
								<view class="functionList me-fx-row-start-c" v-if="item.publishShow.appointed_time != ''">
									<image src="../../static/img/newimg/a22.png" mode=""></image>
									<view class="functionFont">
										{{item.publishShow.appointed_time}}
									</view>
								</view>
								<view class="functionList me-fx-row-start-c" v-if="item.publishShow.city !=''">
									<image src="../../static/img/newimg/a20.png" mode=""></image>
									<view class="functionFont">
										{{item.publishShow.city}}
									</view>
								</view>
								<view class="functionList me-fx-row-start-c" v-if="item.publishShow.expectObjTag.name!=''">
									<image src="../../static/img/newimg/a21.png" mode=""></image>
									<view class="functionFont">
										{{item.publishShow.expectObjTag.name}}
									</view>
								</view>
								<view class="picList me-fx-row-start-c">
									<image :src="item2" mode="" v-for="(item2, index) in item.images"></image>
								</view>
							</block>
							<block v-else>
								<view class="nohave" v-if="item.content ==' '">
								</view>
								<view class="functionList me-fx-row-start-c" v-else>
									<!-- <image src="../../static/img/dongtai.png" mode=""></image> -->
									<view class="functionFont">
										{{item.content}}
									</view>
								</view>
								<view class="picList me-fx-row-start-c">
									<image :src="item2" mode="" v-for="(item2, index) in item.images"></image>
								</view>
							</block>
						</view>

						<view class="me-fx-row-sa-c bottomFunBox">
							<view class="me-fx-col-sa-c " @click="dianzannBtn(item.id,index)">
								<image src="../../static/img/newimg/a18.png" mode="" v-if="item.is_praise == '2'"></image>
								<image src="../../static/img/newimg/a13.png" mode="" v-else></image>
								<view class="bottomFunFont">
									{{item.praise_count}}
								</view>
							</view>
							<view class="me-fx-col-sa-c" @click="pinglunBtn(item.id)">
								<image src="../../static/img/newimg/a15.png" mode=""></image>
								<view class="bottomFunFont">
									评论
								</view>
							</view>
							<view class="me-fx-col-sa-c" @click="baomingBtn(item.id,index)" v-if="item.type=='2'">
								<image src="../../static/img/newimg/a14.png" mode="" v-if="item.is_join == '1'"></image>
								<image src="../../static/img/newimg/a16.png" mode="" v-else></image>
								<view class="bottomFunFont">
									我要报名(<text>{{item.join_count}}</text>)
								</view>
							</view>
						</view>  
					</view>
				</view>
			</block>
			<view class="nohaveData" v-if="nohaveData">
				<image src="../../static/img/newimg/xx.png" mode=""></image>
				暂时没有更多数据啦~
			</view>
		</view>

		<!-- 最新约会 -->
		<!-- <view class="Covering" v-if="newCovering">
			<view class="newList">
				<view class="topBox">
					<view class="bottomBorder" v-for="(item, index) in newList" @click="newListsBtn(index)">
						{{item}}
					</view>
				</view>
				<view class="bottomBox" @click="cancel">
					取消
				</view>
			</view>
		</view> -->
		<!-- 刷选 -->
		<view class="Covering" v-if="chooseBox">
			<view class="chooseBox">
				<view class="chooseAdress me-fx-row-sb-c" @click="adressShow=true">
					<view class="adressLeft" v-if="adressVal != '' ">
						{{adressVal}}
					</view>
					<view class="adressLeft" v-else>
						地区筛选
					</view>
					<image src="../../static/img/right.png" mode=""></image>
				</view>
				<view class="chooseTitle">
					性别筛选
				</view>
				<view class="me-fx-row-start-c">
					<view :class="[chooseConter ==index ? 'chooseActive chooseConter':'chooseConter']" v-for="(item, index) in noGenderList"
					 @click="noGenderBtn(index)">
						{{item}}
					</view>
				</view>
				<view class="chooseTitle">
					发布筛选
				</view>
				<view class="me-fx-row-start-c">
					<view :class="[choosepush ==index ?'chooseActive chooseConter':'chooseConter']" v-for="(item, index) in newList"
					 @click="newListsBtn(index)">
						{{item}}
					</view>
				</view>
				<view class="chooseSure">
					<view class="" @click="chooseSureBtn">
						确定
					</view>
				</view>
			</view>
		</view>
		<!-- 不限性别 -->
		<!-- <view class="Covering" v-if="noGender">
			<view class="noGenderList">
				<view class="topBox">
					<view class="bottomBorder" v-for="(item, index) in noGenderList" @click="noGenderBtn(index)">
						{{item}}
					</view>
				</view>
				<view class="bottomBox" @click="cancel">
					取消
				</view>
			</view>
		</view> -->
		<!--发布节目主题 -->
		<view class="Covering" v-if="pushProgram">
			<view class="programBox">
				<view class="programHead me-fx-row-sb-c">
					<view class="headBox">
						请选择发布节目主题
					</view>
					<image src="../../static/img/16fe54f2843f922afa5b17c53260094.png" mode="" @click="pushProgram = false"></image>
				</view>
				<view class="programList me-fx-row-start-c">
					<view class="program me-fx-col-sb-c" v-for="(item, index) in iconList" @click="goSendP(item.id,item.name)">
						<image :src="item.icon" mode=""></image>
						<view class="programFont">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 地址 -->
		<u-picker mode="region" v-model="adressShow" :default-selector="[0]" @confirm='confirm'></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				headerList: ['最新发布', '不限性别', '不限地区'],
				newCovering: false,
				newList: ['最新发布', '最近约会'],
				noGender: false,
				noGenderList: ['不限性别', '只看女生', '只看男生'],
				bannerList: [],
				rightTK: false,
				pushProgram: false,
				rightData: [{
					url: '../../static/img/dynamic2.png',
					name: '发节目'
				}, {
					url: '../../static/img/dynamic.png',
					name: '发动态'
				}],
				iconList: [],
				stationList: [],
				page: 1,
				sexPic: 2,
				type: '',
				gender: '',
				adressShow: false,
				last_page: 1,
				dianzannShow: false,
				chooseBox: false,
				chooseConter: -1,
				choosepush: -1,
				adressVal: '',
				nohaveData: false,
				barHeight:25
			}
		},
		created() {
			this.banner();
			this.makingF();
			let dataList = {
				type: this.type,
				gender: this.gender,
				city: this.adressVal
			}
			this.publishListData(this.page, dataList)
			this.getSystemStatusBarHeight()
		},
		methods: {
			onPullDownRefresh() {
				let dataList = {
					type: this.type,
					gender: this.gender,
					city: this.adressVal
				}
				this.publishListData(this.page, dataList)
				setTimeout(function() {
					uni.stopPullDownRefresh();
				}, 1000);
			},
			//获取系统状态栏高度
			getSystemStatusBarHeight: function() {
				// #ifdef APP-PLUS
				var height = plus.navigator.getStatusbarHeight();
				this.barHeight = height;
				// #endif
				// #ifdef H5
				this.barHeight = 0;
				// #endif
			},
			chooseBtn() {
				this.chooseBox = true
				this.adressVal = '';
				this.choosepush = -1;
				this.chooseConter = -1;
				this.type = '';
				this.gender = ''
			},
			pinglunBtn(id) {
				uni.navigateTo({
					url: '../station/listdetails?id=' + id
				})
			},
			chooseSureBtn() {

				this.page = 1
				let data = {
					type: this.type,
					gender: this.gender,
					city: this.adressVal
				}
				this.publishListData(this.page, data)
				this.chooseBox = false
			},
			newListsBtn(index) {
				this.choosepush = index;
				this.type = index + 1
				his.headerList[0] = this.newList[index]
			},
			dianzannBtn(id, index) {
				this.$u.post('/publish/praise', {
						id: id
					}).then(res => {
						if (res) {
							uni.showToast({
								title: res.message,
								duration: 1000,
								icon: 'none'
							})
							if (this.stationList[index].is_praise == 1) {
								this.stationList[index].praise_count = this.stationList[index].praise_count - 1
								this.stationList[index].is_praise = '2'
							} else {
								this.stationList[index].praise_count = this.stationList[index].praise_count + 1
								this.stationList[index].is_praise = '1'
							}
						}
					})
					.catch((res) => {
						console.log(res)
					})
			},
			goSendP(id, name) {
				uni.navigateTo({
					url: '../station/sendProgram?id=' + id + '&name=' + name
				})
				this.pushProgram = false
			},
			iconBtn(id, name) {
				uni.navigateTo({
					url: '../station/iconList?id=' + id + '&name=' + name
				})
			},
			publishBtn() {
				if (this.rightTK) {
					this.rightTK = false
				} else {
					this.rightTK = true
				}
			},
			confirm(e) {

				if (e.province.value == '11') {
					this.adressVal = e.province.label
				} else if (e.province.value == '12') {
					this.adressVal = e.province.label
				} else if (e.province.value == '31') {
					this.adressVal = e.province.label
				} else {
					this.adressVal = e.city.label
				}
			},
			baomingBtn(id, index) {
				this.$u.post('/publish/show/join', {
						id: id
					}).then(res => {
						if (res) {
							uni.showToast({
								title: res.message,
								duration: 1000,
								icon: 'none'
							})
							if (this.stationList[index].is_join == 1) {
								this.stationList[index].join_count = this.stationList[index].join_count - 1
								this.stationList[index].is_join = '2'
							} else {
								this.stationList[index].join_count = this.stationList[index].join_count + 1
								this.stationList[index].is_join = '1'
							}
						}
					})
					.catch((res) => {
						console.log(res.message)
					})
			},
			publishListData(page, dataList) {
				this.$u.get('/publish/list/' + page, dataList).then(res => {
						if (res) {
							if (res.data.list.data.length > 0) {
								if (res.data.list.last_page == 1) {
									this.stationList = res.data.list.data;
								} else {
									this.stationList = this.stationList.concat(res.data.list.data)
								}
								this.nohaveData = false
							} else {
								this.stationList = []
								this.nohaveData = true
							}

							this.last_page = res.data.list.last_page
						}
					})
					.catch((res) => {
					})
			},
			rightDataBtn(index) {
				if (index == '0') {
					this.pushProgram = true;
					this.rightTK = false
				} else if (index == '1') {
					this.rightTK = false
					uni.navigateTo({
						url: '../station/sendCondition'
					})
				}
				console.log(index, 'index')
			},
			banner() {
				this.$u.get('/banner/list').then(res => {
						if (res) {
							this.bannerList = res.data.data
						}
					})
					.catch((res) => {
						console.log(res.message)
					})
			},
			makingF() {
				this.$u.get('/show_menu/index').then(res => {
						if (res) {
							this.iconList = res.data.list
						}
					})
					.catch((res) => {
						console.log(res.message)
					})
			},
			noGenderBtn(index) {
				this.chooseConter = index
				this.gender = index + 1
			},
			headerBtn(index) {
				if (index == 0) {
					this.newCovering = true

				} else if (index == 1) {
					this.noGender = true
				} else if (index == 2) {
					this.adressShow = true
				}

			},
			stationListBtn(id) {
				uni.navigateTo({
					url: '../station/listdetails?id=' + id
				})
			},

			stationListBtn2(id) {
				uni.navigateTo({
					url: '../station/listdetails?id=' + id
				})
			},
			lookDetail(id) {
				console.log(id, 'dddd')
				uni.navigateTo({
					url: '../station/headDetails?id=' + id
				})
			},
			cancel() {
				this.newCovering = false
				this.noGender = false
			},
			onReachBottom() { //uniapp 监听下拉加载生命周期
				console.log(this.last_page)
				if (this.page >= this.last_page) {
					uni.showToast({
						title: '没有更多数据了',
						duration: 1000,
						icon: 'none'
					})
					return
				}
				this.page++
				let data = {
					type: this.type,
					gender: this.gender,
					city: this.adressVal
				}
				this.publishListData(this.page, data)
			},
		}
	}
</script>

<style>
	.nohaveData image {
		width: 100%;
		height: 537rpx;
		display: block;
	}
	.bgc {
		margin-bottom: 100rpx;
	}

	.status_bar,.top_view{
		background-color: white;
		}

	.stationCenter {}

	.headTitle {
		font-size: 36rpx;
		font-weight: bold;
	}

	.publish {
		padding-left: 76rpx;
		font-size: 30rpx;
		font-weight: bold;
	}

	.swiper-item,
	navigator {
		width: 100%;
		height: 100%;
	}

	.swiper-item image {
		width: 100%;
		height: 100%;
		border-radius: 8rpx;
	}


	.listBox {
		width: 100%;
		margin: auto;
		padding: 50rpx 30rpx 30rpx;
		flex-wrap: wrap;
		box-sizing: border-box;
	}

	.listBox view {
		width: 20%;
	}

	.list {
		width: 20%;
	}

	.list view {
		width: 100%;
		text-align: center;
	}

	.list image {
		width: 82rpx;
		height: 82rpx;
		border-radius: 50%;
	}

	.slideshowBox {
		padding: 0rpx 20rpx 0;
		width: 100%;
		position: relative;
	}

	.listTitle {
		margin-top: 10rpx;
		font-size: 26rpx;
		color: rgba(102, 102, 102, 1);
	}

	.bottomListBox {
		margin-top: 40rpx;
		border-top: 16rpx solid rgba(249, 246, 255, 1);
		padding: 20rpx;
	}

	.bottomListHeader {
		/* 	flex: 1;
	text-align: center; */
	}

	.bottomListHeader image {
		width: 30rpx;
		height: 30rpx;
		margin-left: 10rpx;
	}

	.newList,
	.noGenderList {
		position: fixed;
		bottom: 4%;
		width: 94%;
		left: 50%;
		transform: translateX(-50%);
	}

	.newList view,
	.noGenderList view {
		background-color: white;
		text-align: center;
	}

	.topBox {
		background-color: white;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.topBox view {
		height: 80rpx;
		line-height: 80rpx;
	}

	.bottomBox {
		background-color: white;
		border-radius: 10rpx;
		margin-top: 50rpx;
		height: 80rpx;
		line-height: 80rpx;
	}

	.bottomBorder {
		border-bottom: 1rpx solid #D3D3D3;
	}

	.uni-indexed-list__menu {
		width: 24px;
		background-color: #007AFF !important;
		display: block !important;
	}

	.stationList {
		padding: 20rpx;
	}

	.borderTop .stationList:nth-of-type(n+2) {
		padding: 20rpx;
		border-top: 10rpx solid #F8F6FF;
	}

	.functionBox {
		padding: 16rpx;
	}

	.picPos .avatar {
		width: 84rpx;
		height: 84rpx;
		border-radius: 16rpx;
	}

	.headPicRight {
		margin-left: 20rpx;
	}

	.headPicRight .time {
		font-size: 26rpx;
		color: #AAAAAA;
		margin-top: 10rpx;
	}

	.headPicRight .headFont {
		font-size: 30rpx;
		font-weight: 700;
	}

	.headPicBox {
		height: 80rpx;
	}

	.headPicBox .headPicRight image {
		margin-left: 20rpx;
	}

	.functionList {
		margin: 6rpx 0;
	}

	.functionList image {
		width: 36rpx;
		height: 36rpx;
	}

	.functionList .functionFont {
		/* margin-left: 10rpx; */
		font-size: 30rpx;
		color: rgba(51, 51, 51, 1);
	}

	.picPos {
		position: relative;
	}

	.bottomFunBox {
		width: 90%;
		margin: 0rpx 0rpx 24rpx;

	}

	.bottomFunBox view image {
		width: 50rpx;
		height: 50rpx;
	}

	.bottomFunBox .bottomFunFont {
		text-align: center;
		font-size: 24rpx;
		color: #AAAAAA;
	}

	.rightFiex {
		position: fixed;
		right: 0;
		width: 300rpx;
		height: 281rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(149, 149, 149, 0.2);
		border-radius: 0rpx 0rpx 0rpx 6rpx;
		padding: 0 0 0 74rpx;
		box-sizing: border-box;
		z-index: 1;
	}

	.rightFiex image {
		width: 44rpx;
		height: 44rpx;
		display: block;
		margin-right: 17rpx;
	}

	.rightOne {
		height: 140rpx;
	}

	.rightOne:nth-of-type(2) {
		height: 140rpx;
		border-top: 1rpx solid rgba(249, 246, 255, 1);
	}

	.rightFont {
		font-size: 32rpx;
		color: rgba(51, 51, 51, 1);
	}

	.programBox {
		width: 90%;
		margin: 300rpx auto;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx 0rpx 24rpx 0rpx rgba(185, 185, 185, 0.24);
		border-radius: 10rpx;
		padding: 40rpx 30rpx;
	}

	.programBox .programHead .headBox {
		font-size: 34rpx;
		color: rgba(51, 51, 51, 1);
	}

	.programBox .programHead image {
		width: 47rpx;
		height: 46rpx;
		text-align: right;
	}

	.programList {
		flex-wrap: wrap;
		align-content: flex-start;
		padding: 50rpx 0 0 0;
	}

	.programList .program {
		width: 25%;
		margin-top: 35rpx;
	}

	.programList .program image {
		width: 110rpx;
		height: 110rpx;
		border-radius: 50%;
	}

	.headPicRight .sexPic {
		width: 20rpx !important;
		height: 26rpx !important;
	}

	.headPicRight .vip {
		width: 50rpx;
		height: 25rpx;
	}

	.nohave {
		width: 0rpx;
		height: 0rpx;
	}

	.picList {
		padding: 20rpx 0rpx;
		box-sizing: border-box;
	}

	.picList image {
		width: 160rpx;
		height: 160rpx;
		border-radius: 8rpx;
		margin-right: 14rpx;
	}

	.bgc /deep/.uni-navbar--fixed {
		width: 100%;
	}

	.goback {
		width: 40rpx;
		height: 30rpx;
	}

	/* new */
	.lunPicBox {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 368rpx;
	}

	.lunPicBox image {
		width: 100%;
		height: 368rpx;
	}

	.listBorderTop {
		background-color: #FAF8FF;
		width: 96%;
		margin: 13rpx auto 0;
		border-radius: 8rpx;
	}

	.stationListRight {
		width: 100%;
	}

	.chooseBox {
		width: 80%;
		margin: 50% auto 0;
		background: rgba(255, 255, 255, 1);
		border-radius: 8rpx;
		/* transform: translateY(-20%); */
		padding: 28rpx;
	}

	.chooseAdress {
		height: 120rpx;
		line-height: 120rpx;
		border-bottom: 1rpx solid #F5F5F5;
	}

	.chooseAdress image {
		width: 10rpx;
		height: 20rpx;
		display: block;
	}

	.chooseTitle {
		font-size: 28rpx;
		color: rgba(102, 102, 102, 1);
		line-height: 80rpx;
	}

	.chooseConter {
		height: 80rpx;
		background: rgba(249, 246, 255, 1);
		border-radius: 8rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 28rpx;
		color: rgba(102, 102, 102, 1);
		margin-right: 30rpx;
		padding: 0 20rpx;
	}

	.chooseActive {
		background: rgba(130, 76, 254, 1);
		border-radius: 8rpx;
		color: white;
	}

	.chooseSure {
		width: 100%;
	}

	.chooseSure view {
		width: 190rpx;
		height: 80rpx;
		background: rgba(130, 76, 254, 1);
		border-radius: 8rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: rgba(255, 255, 255, 1);
		text-align: center;
		line-height: 80rpx;
		margin: 30rpx auto 0;
	}

	.nohaveData {
		text-align: center;
		padding: 16rpx 30rpx;
		
	}
</style>
